<template>
    <div calss = "backgroud" id = "backgroud" >
    <div class = "wrap" id ="wrap">
        <div class = "logGet">
            <!-- 头部提示信息 -->
            <div class = "logD logDtip">
                <p class="p1">登入</p>
            </div>
            <!-- 输入框 -->
            <div class="lgD">
                <img src= "../assets/user.png" width= "40" height="40" alt="输入用户名"/>
                <input  v-model="username" type="text" placeholder="输入用户名"  />
            </div>
            <div class="lgD">
                <img src="../assets/login.png" width="40" height="40" alt="输入用户密码"/>
                <input  v-model="password"  type="text" placeholder="输入用户密码" />
            </div>
            <div class= "logC">
                <a><button v-on:click="login()">登入</button></a>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
var params = new URLSearchParams();



export default {
    name: 'login',
    data() {
        return {
            username: "ADMIN",
            password: "ADMIN"
        }
    },
    methods: {
        login() {
            // params.append('username', this.username); //你要传给后台的参数值 key/value
            // params.append('password', this.password);
            // axios.post('api/v1/user/login',params)
            // .then(response => (
                
            // //假设登入成功，则跳转到index组件
            //  this.$router.replace('/index')
                
            // ))
            // .catch(function (error) { // 请求失败处理
            //     console.log(error);
            // });
            this.$router.replace('/index')
            
        },
        loginOut(){

        }
    }
}
</script>
<style>


 html,body,#app {
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;

  }
    #backgroud {
        background-image: url(../assets/xiaoxuner.png);
        background-size: 100%; 
        /* background-repeat: no-repeat;  */
        /* background-position: center center; */
        width:100%;
        height: 100%;
    }
    * {
        margin: 0;
        padding: 0;
    }
    #wrap {
        height: 600px;
        width: 100%;
        background-position: center center;
        position: relative;
        
    }
    #head {
        height: 120px;
        width: 100;
        background-color: #66CCCC;
        text-align: center;
        position: relative;
    }
    #wrap .logGet {
        height: 408px;
        width: 368px;
        position: absolute;
        background-color: rgba(238, 182, 29, 0);
        top: 100px;
        right: 15%;
    }
    .logC a button {
        width: 100%;
        height: 45px;
        background-color: #0f7bdf;
        border: none;
        color: white;
        font-size: 18px;
    }

    .logGet .logD.logDtip .p1 {
        display: inline-block;
        font-size: 30px;
        margin-top: 30px;
        width: 86%;
        color: #000;
    }

    #wrap .logGet .logD.logDtip {
        width: 86%;
        /* border-bottom: 1px solid #ee7700; */
        margin-bottom: 60px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .logGet .lgD img {
        position: absolute;
        top: 5px;
        left: 8px;
        border-radius:50%;
    }

    .logGet .lgD input {
        width: 100%;
        height: 42px;
        /* text-indent  为首行缩进 */
        text-indent: 5rem;   
        background:rgba(255,255,255,0);
        color: rgb(201, 46, 46);
        border: 0px;
        outline:none;
        font-size: 20px;
    }

    #wrap .logGet .lgD {
        width: 86%;
        position: relative;
        margin-bottom: 30px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }

    #wrap .logGet .logC {
        width: 86%;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
</style>
